<!--
    GoodsView.vue
    gree_ctm

    Created by 汪明 on 15:49.
 -->
<template>
    <view class="GoodsView">
        <image :src="getConfig().imageURL(value.thumbUrl)" mode="widthFix"></image>
        <view class="title_view">
            <view class="label_view" v-show="value.selfRunFlag == '20'">自营</view>
            <view class="name_view">{{ value.productName }}</view>
        </view>
        <view class="labels_view" v-show="value.productAttributes.length > 0">
            <view class="label_view" v-for="(label,index) in value.productAttributes" :key="label">{{ label }}</view>
        </view>
        <view class="price_view">
            <view style="font-size: 10px;color: #ef2f2f;font-weight: 700">¥</view>
            <view style="font-size: 16px;color: #ef2f2f;font-weight: 700">{{ value.currentPrice }}</view>
            <view style="font-size: 10px;color: #999;font-weight: 700;padding-left: 8px;text-decoration:line-through;">
                {{ value.originalPrice }}
            </view>
        </view>
        <view class="colors_label_view" v-show="value.activityLabs.length > 0">
            <GradientBordersTextView border-radius="4" borde-width="2" font-size="12"
                                     v-for="(item,index) in value.activityLabs" :text="item"></GradientBordersTextView>
        </view>
        <view class="sales_volume_view">已出售{{ value.salesVolume }}件</view>
    </view>
</template>

<script setup lang="ts">
import GradientBordersTextView from "@/components/GradientBordersTextView.vue";

interface Goods {
    activityLabs: string[]
    activityType: string
    currentPrice: string
    distributionItemId: string
    homeRecommendId: number
    id: number
    materialCode: string
    openType: number
    originalPrice: string
    productAttributes: string[]
    productId: string
    productName: string
    productStatus: string
    salesVolume: number
    selfRunFlag: string
    skuId: string
    thumbUrl: string
}

const props = defineProps<{
    value: Goods
}>()
import getConfig from "@/api/config";


</script>

<style scoped lang="scss">
.GoodsView {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 12px;

  image {
    width: 100%;
  }

  .title_view {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;

    .label_view {
      color: white;
      font-size: 10px;
      padding: 0px 2px;
      height: 15px;
      line-height: 15px;
      border-radius: 2px;
      background-color: red;
    }

    .name_view {
      flex: 1;
      padding-left: 5px;
      color: #1a1a1a;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .labels_view {
    display: flex;
    flex-direction: row;
    padding-left: 12px;
    padding-top: 5px;
    max-height: 25px;
    flex-wrap: wrap;
    overflow: hidden;

    .label_view {
      background-color: #f2f2f2;
      color: #666666;
      padding: 3px 3px;
      font-size: 10px;
      margin-right: 4px;
      border-radius: 12px;
    }

  }

  .colors_label_view {
    display: flex;
    flex-direction: row;
    padding-left: 12px;
    padding-top: 5px;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .price_view {
    padding-left: 12px;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }

  .sales_volume_view {
    color: #666666;
    font-size: 10px;
    padding-left: 12px;
    padding-top: 5px;
    padding-bottom: 12px;
  }

}
</style>
